<template>
  <div class="invite_page">
    <CommonHeader title="邀请返卷" />
    <div class="invite_content page_no_tab_bar">
      <div class="invite_img">
        <img src="@/assets/profile/invite_img.png" alt="">
      </div>
      <!-- 邀请码 -->
      <div class="input_box">
        <div class="input_label">邀请码</div>
        <div class="input input_copy">
          <input type="text" v-model="ruleForm.inviteCode" disabled/>
          <div class="is_copy" @click="copyContent(ruleForm.inviteCode)">
            <img src="@/assets/profile/copy_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 邀请链接 -->
      <div class="input_box">
        <div class="input_label">邀请链接</div>
        <div class="input input_copy">
          <input type="text" v-model="ruleForm.inviteLink" disabled />
          <div class="is_copy" @click="copyContent(ruleForm.inviteLink)">
            <img src="@/assets/profile/copy_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule"></div>
        <div class="font_color">邀请即可赚取高达45 USDT</div>
      </div>
      
      <!-- 下载APP -->
      <div class="input_box">
        <div class="input_label">下载APP</div>
        <div class="input input_copy">
          <input type="text" v-model="ruleForm.downloadAddr" disabled />
          <div class="is_copy" @click="copyContent(ruleForm.downloadAddr)">
            <img src="@/assets/profile/copy_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule"></div>
      </div>
       <!-- 邀请好友按钮 -->
      <div class="operate_btn" @click="goPage">邀请好友</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import CommonHeader from "@/components/CommonHeader.vue";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

// 获取路由对象
const router = useRouter()
// 邀请表单信息
const ruleForm = ref({
  inviteCode: "XIAODAIHUO-KUAILAI4545",
  inviteLink: "https://arong.45",
  downloadAddr: "HTTPS://APK.CAUGUNADB.APK"
})

// 复制输入框内容
const copyContent = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("复制成功！");
  } catch (err) {
    ElMessage.error("复制失败！");
  }
};

// 邀请好友
const goPage = () => {
  router.push("/profile/invite/friends")
}

</script>

<style lang="scss" scoped>
.invite_page {
  .invite_content {
    .invite_img {
      padding-top: 50px;
      padding-bottom: 20px;
      display: flex;
      justify-content: center;
    }
    .input_box {
      // height: 108px;
      margin-bottom: 20px;
      .input_label {
        margin-bottom: 10px;
      }
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        input {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #BABCBF;
        }
      }
      .input_copy {
        display: flex;
        align-items: center;
        input {
          flex: 1;
        }
        .is_copy {
          display: flex;
          align-items: center;
          padding: 0px 10px;
        }
      }
    }
    .operate_btn {
      margin-top: 80px;
      background: linear-gradient(to right, #14da62, #0d5eae);
      text-align: center;
      padding: 10px;
      border-radius: 10px;
    }
  }
}
</style>
